<template>
	<div class="myMusic">
		<hnav class="nav">
			<span slot="left" class="left" @click="more">更多</span>
			<span slot="mod" class="mod">我的音乐</span>
			<span slot="right" class="right"> <span class="fa fa-rotate-270 fa-align-left"></span></span>
		</hnav>
		<transition name="more">
			<div class="more" v-show="isShowMore">
				<div class="more1"><span class="onic fa fa-plus-square-o"></span><span>新建歌单</span></div>
				<div class="more2"><span class="onic fa fa-list-ul"></span><span>管理歌单</span></div>
				<div class="more3"><span class="onic fa fa-cloud"></span><span>我的音乐云</span></div>
			</div>
		</transition>
			<transition name="opreat">
				<div v-show="isShowMore" class="moreUp">
					
				</div>
		</transition>
	</div>
</template>

<script>
	import hnav from '../components/nav'
	export default {
		name: 'myMusic',
		data: function() {
			return {
				isShowMore: false,
			}
		},
		methods: {
			more: function() {
				this.isShowMore = !this.isShowMore
			}
		},
		components: {
			hnav
		}
	}
</script>

<style scoped>
	.opreat-enter-active {
		transition: all .2s linear;
	}
	
	.opreat-leave-active {
		transition: all .2s linear;
	}
	
	.opreat-enter,
	.opreat-leave-active {
		opacity:0;
	}
	.moreUp{
		background-color: #A2A2A2;
		height: 530px;
		width: 100vw;
		position: absolute;
		bottom: 62px;
	}
	.more-enter-active {
		transition: all .2s linear;
	}
	
	.more-leave-active {
		transition: all .2s linear;
	}
	
	.more-enter,
	.more-leave-active {
		transform: translateY(-120px);
	}
	
	.onic+span {
		color: gray;
	}
	
	.onic {
		width: 40px;
		color: gray;
		font-size: 20px;
		display: inline-block;
		height: 40px;
		line-height: 40px;
		box-sizing: border-box;
		padding-right: 10px;
	}
	
	.more>div {
		padding-left: 20px;
		height: 40px;
		box-sizing: border-box;
		border-bottom: lightgray 1px solid;
	}
	
	.more {
		z-index: 10;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		position: relative;
		width: 100%;
	}
	
	.nav {
		z-index: 20;
		position: relative;
		color: white;
		background-color: #C50C0C;
		height: 50px;
		overflow: hidden;
	}
	
	.left {
		height: 50px;
		line-height: 50px;
		display: inline-block;
		width: 33vw;
		text-align: left;
		float: left;
		padding-left: 20px;
		box-sizing: border-box;
	}
	
	.mod {
		height: 50px;
		line-height: 50px;
		width: 33vw;
		display: inline-block;
		box-sizing: border-box;
		text-align: center;
	}
	
	.right {
		padding-right: 20px;
		box-sizing: border-box;
		line-height: 50px;
		height: 50px;
		display: inline-block;
		width: 33vw;
		float: right;
		text-align: right;
	}
	
	.fa-align-left {
		font-size: 20px;
		font-weight: 0;
	}
</style>